<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="{% static '/css/login.css' %}"/>
    <title>首页</title>
    <script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
    <script src="{% static 'js/common.js' %}"></script>
    <script src="{% static 'js/login.js' %}"></script>
    <script>
        $(function () {
            $("#butn1").click(function () {
                let acc = $("#username").val()
                if (acc == "" || acc == undefined) {
                    $("#errorMsg").html("账户不能为空！")
                    return;
                }
                let pw = $("#password").val()
                if (pw == "" || pw == undefined) {
                    $("#errorMsg").html("密码不能为空！")
                    return;
                }
                $("#myform1").submit()
            })
        })
    </script>
</head>
<body>
<!-- 导航界面 -->
<nav>
    <div class="nav">
        <span class="lf">终于等到你</span>
        <span class="rt">爱下载资源分享平台</span>
    </div>
</nav>

<!-- 登录面板 -->
<section class="main">
    <div class="login-type">
        <a class="checked" name="login-pwd">密码登录</a><a name="login-sms">短信码登录</a>
    </div>

    <form id="myform1" action="{% url 'auth:userlogin' %}" class="login-pwd login-panel" autocomplete="off"
          method="post">
        <div id="errorMsg"></div>
        <input id="username" type="text" name="username" class="inp user" placeholder="账号/邮箱/手机号"/>
        <input id="password" type="password" name="password" class="inp pwd" placeholder="密码"/>
        <!-- 处理密码眼睛 -->
        <span class="eye clos"></span>

        <div class="re">
            <input type="checkbox" name="remember-me" id="remember-me"/>
            <label for="remember-me">下次自动登录</label>
            <a class="find-pass" href="{% url 'auth:userfindpass' %}">忘记密码，立即找回</a>
        </div>

        <input id="butn1" type="button" class="log-btn" value="登录"/>

        <a href="{% url 'auth:userregister' %}" class="regist">没有账号？立即注册</a>


    </form>

    <form class="login-sms login-panel" autocomplete="off">
        <input type="text" name="email1" class="inp tel" id="email1" placeholder="邮箱"/>
        <input type="code" name="code" class="inp code" placeholder="验证码"/>
        <button type="button" class="btn-code" id="captcha_btn">获取验证码</button>
        <div class="re">
            <input type="checkbox" name="remember-me" id="remember"/>
            <label for="remember">下次自动登录</label>
        </div>
        <input type="button" class="log-btn" value="登录"/>
        <a href="{% url 'auth:userregister' %}" class="regist">没有账号？立即注册</a>
    </form>
    <div class="third">
        <span class="lf"></span>第三方登录<span class="rf"></span>
    </div>
    <p class="third">
        <a class="zfb"><span>支付宝</span></a>
        <a class="wx"><span>微信</span></a>
        <a class="qq"><span>QQ</span></a>
    </p>
</section>
<script>
    $(function () {
        function bindCaptchaBtnClick() {
            $("#captcha_btn").click(function (event) {
                let $this = $(this);
                let email = $("#email1").val();
                if (!email) {
                    alert("请输入邮箱");
                    return;
                }
                $this.off("click")
                // 发送ajax请求
                $.ajax('/user/sendemail?email=' + email, {
                    method: "GET",
                    success: function (result) {
                        if (result['code'] == 200) {
                            alert('验证码发送成功');
                        } else {
                            alert(result['msg']);
                        }
                    },
                    fail: function (error) {
                        console.log(error);
                    }
                })
                let countdown = 60;
                let timer = setInterval(function () {
                    if (countdown <= 0) {
                        $this.text("获取验证码");
                        clearInterval(timer);
                        bindCaptchaBtnClick()
                    } else {
                        countdown--;
                        $this.text(countdown + "s")
                    }
                }, 1000)
            })
        }

        bindCaptchaBtnClick()
    })
</script>
<footer>
    <p class="decro">本站所有资源信息均由网友上传,本站只是为了推广资源让更多读者下载,使用。如涉侵权，请联系管理员</p>
    <p class="cr">Copyright © 2021-2025 <span class="site">爱下载资源分享平台</span> All Rights Reserved.</p>
    <p class="num">沪ICP备14048333号</p>
</footer>

</body>

</html>